<template>
  <div class="activity auton" style="margin-top: -50px">
    <div class="topImg">
      <div>
        <img
          src="https://static.cdpservice.com/image/banner/幸福文旅.jpg"
          alt=""
        />
      </div>
      <img
        src="https://static.cdpservice.com/image/banner/幸福文旅.jpg"
        alt=""
      />
    </div>
    <div class="activitycontent">
      <!-- 文体活动 -->
      <div class="navTitle">
        <p class="titleName">推荐活动</p>
        <p class="titleenglish">RECOMMENDED ACTIVITIES</p>
      </div>
      <div class="activitybanner">
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto; margin-top: 30px"
          v-if="TopList.length == 0 && flag"
        />
        <a-carousel :autoplay="true">
          <!-- <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div> -->
          <div
            class="list"
            v-for="(item, index) in TopList"
            :key="index"

          >
            <div class="img" @click="getDescribe(item.eventNo)">
              <img
                class="imgborder"
                :src="imageWebUrl + item.cover"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
              />
            </div>
            <div class="swiperTol">
              <div class="swiper"  @click="getDescribe(item.eventNo)">
                <span class="iDspan1">{{ item.title }}</span>
                <span class="iDtxt1" v-html="item.abstracts"></span>
                <!-- <span class="iDspan2" v-if="item.signStartTime"
                  >报名时间：{{ item.signStartTime.split("-").join(".") }}-{{
                    item.signEndTime.split("-").join(".")
                  }}</span
                > -->
                <a-button
                  value="报名"
                  type="primary"
                  class="abtn"
                  :disabled="item.eventStatus != 2"
                  v-show="item.type == 2"
                  >{{
                    item.eventStatus == 1
                      ? "等待报名"
                      : item.eventStatus == 2
                      ? "立即报名"
                      : item.eventStatus == 3
                      ? "报名结束"
                      : item.eventStatus == 4
                      ? "报名结束"
                      : "活动结束"
                  }}</a-button
                >
                <!-- 01.展示活动 02.报名活动，03.征集活动 -->
              </div>
            </div>
          </div>
        </a-carousel>
      </div>
      <!-- 最新活动 -->
      <div class="mallactivity">
        <div class="navTitle">
          <p class="titleName">最新活动</p>
          <p class="titleenglish">LATEST ACTIVITIES</p>
        </div>
        <div class="mall" @click="getDescribe2(2)">
          <p>更多</p>
          <img src="@/assets/image/employment/mall.png" alt="" />
        </div>
      </div>
      <!-- <div class="newactivity"> -->
      <div class="cFimg1">
        <div
          class="oEimg-txt5"
          v-for="(item, index) in LatestList"
          :key="index"
          @click="getDescribe(item.eventNo)"
        >
          <div class="oEimage4">
            <img
              class="img1 imgborder"
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
            <img
              v-if="item.eventStatus == 1"
              class="image2"
              src="@/assets/image/icon_start.png"
              alt=""
            />
            <img
              v-else
              class="image2"
              src="@/assets/image/icon_conduct.png"
              alt=""
            />
          </div>
          <span class="oEspan9">{{ item.title }}</span>
          <div class="itenDiv">
            <span class="oEspan10" v-if="item.eventDate"
              ><img
                src="@/assets/image/time_icon.png"
                width="20"
                alt=""
              />&nbsp;&nbsp;{{ item.eventDate }}</span
            >
            <span class="oEspan10"
              ><img
                src="@/assets/image/employment/place.png"
                width="20"
                alt=""
              />&nbsp;&nbsp;{{ item.address?item.address:'线上' }}</span
            >

            <!-- <span class="aLspan3" v-if="item.eventStatus">{{
              item.eventStatus == 1
                ? "未开始"
                : item.eventStatus == 2
                ? "进行中"
                : item.eventStatus == 3
                ? "已结束"
                : item.eventStatus == 4
                ? "报名中"
                : ""
            }}</span> -->
          </div>
          <div class="aLbottom">
            <span class="aLspan1"
              >{{ item.tag ? "#" : ""
              }}{{
                item.tag
                  ? item.tag.split(",").join("#").split("，").join("#")
                  : ""
              }}</span
            >
            <span class="aLspan2"
              ><img
                src="@/assets/image/employment/views.png"
                width="16"
                alt=""
              />&nbsp;&nbsp;{{ item.browseNum }}</span
            >
          </div>
        </div>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto; margin-top: 30px"
          v-if="LatestList.length == 0 && flag"
        />
      </div>
      <!-- </div> -->
      <!-- 往期风采 -->
      <div class="mallactivity">
        <div class="navTitle">
          <p class="titleName">往期风采</p>
          <p class="titleenglish">PAST STYLE</p>
        </div>
        <div class="mall" @click="getDescribe2(3)">
          <p>更多</p>
          <img src="@/assets/image/employment/mall.png" alt="" />
        </div>
      </div>
      <div class="cFimg1">
        <div
          class="oEimg-txt52"
          v-for="(item, index) in EndEveList"
          :key="index"
          @click="getDescribe(item.eventNo)"
        >
          <div class="oEimage42">
            <img
              class="imgborder"
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </div>
          <span class="oEspan9">{{ item.title }}</span>
          <p class="iDtxt3">{{ item.abstracts }}</p>
          <span class="Aspan5"
            ><a>详情&nbsp;<a-icon type="arrow-right" /></a
          ></span>
        </div>

        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto; margin-top: 30px"
          v-if="EndEveList.length == 0 && flag"
        />
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      imgUrl: require('@/assets/image/pagint.png'),
      // 置顶活动列表
      TopList: [],
      // 往期风采列表
      EndEveList: [],
      // 最新活动列表
      LatestList: [],
      onLoading: false,
    };
  },
  mounted() {
    this.getTopList();
    this.getEndEveList();
    this.getLatestList();
  },
  methods: {
    // 跳转列表函数
    getDescribe2(e) {
      //  直接调用$router.push 实现携带参数的跳转
      this.$router.push("/activity/activityList?value=" + e);
    },
    // 跳转函数
    getDescribe(e) {
      //  直接调用$router.push 实现携带参数的跳转
      this.$router.push("/activity/activityDetails?id=" + e);
    },
    // 获取指定活动列表
    getTopList() {
      this.$ajax({
        url: "/entrepreneurial/eventinfo/selTopList",
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.TopList = res.data;
        }
      });
    },

    // 获取往期风采列表
    getEndEveList() {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/eventinfo/selEndEveList",
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.EndEveList = res.data;
        } else {
          this.onLoading = false;
        }
      });
    },

    // 获取最新活动列表
    getLatestList() {
      this.$ajax({
        url: "/entrepreneurial/eventinfo/selLatestList",
        method: "post",
        params: {
          pageSize: 3,
          pageIndex: 1,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.LatestList = res.data.list;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
/* For demo */
.ant-carousel {
  .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
}
.ant-carousel{
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: red;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
}
.ant-carousel {
  .custom-slick-arrow:before {
    display: none;
  }
}
.ant-carousel {
  .custom-slick-arrow:hover {
    opacity: 0.5;
  }
}

.ant-carousel {
  .slick-slide h3 {
    color: #fff;
  }
}
.activity {
  .topImg {
    max-width: 100% !important;
    // min-height:800px;
    max-height: 693px;
    overflow: hidden;
    div {
      width: 100%;
      max-height: 693px;
      z-index: 0;
      position: absolute;
      filter: blur(10px);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 800px;
      z-index: 1;
      position: relative;
    }
  }
  .activitycontent {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    .activitybanner {
      margin-top: 30px;
      width: 100%;
      height: 320px;
      background-color: #ffffff;
      margin-bottom: 70px;
      .list {
        display: flex !important;
        cursor: pointer;
        .img {
          width: 560px;
          height: 320px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s linear;
          }
          img:hover {
            transform: scale(1.1);
          }
        }
        .swiperTol {
          overflow: hidden;
          width: 640px;
          .swiper {
            width: 570px;
            height: 260px;
            margin-left: 30px;
            margin-top: 30px;
            .iDspan1 {
              line-height: 32px;
              font-size: 22px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              display: block;
            }
            .iDspan2 {
              display: block;
              height: 17px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ca0000;
              line-height: 17px;
              margin-top: 24px;
              display: block;
            }
            .iDtxt1 {
              display: block;
              margin-top: 15px;
              line-height: 26px;
            }
          }
        }
      }

      /deep/.slick-dots {
        margin-left: 45px;
        li {
          button {
            width: 20px;
            background-color: #cccccc;
          }
        }
      }
      /deep/li.slick-active {
        button {
          background-color: #ffbe37 !important;
        }
      }
    }
  }
  .mallactivity {
    display: flex;
    justify-content: space-between;
    .mall {
      display: flex;
      align-items: center;
      color: #232d32;
      cursor: pointer;
      p {
        margin-right: 5px;
        font-size: 12px;
      }
      img {
        width: 10px;
      }
    }
  }
}
.cFimg1 {
  min-height: 300px;
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 70px;
  display: flex;
  flex-direction: row;
  //改变方向
  align-items: center;
  .cFspan2 {
    width: 48px;
    display: block;
    overflow-wrap: break-word;
    color: #de1e1e;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    line-height: 30px;
    padding-left: 17px;
  }
}
.abtn {
  width: 120px;
  height: 36px;
  border-radius: 36px;
  margin-top: 24px;
  color: #333333;
}
.oEimg-txt52 {
  width: 268px;
  background-color: #ffffff;
  margin-left: 45px;
  padding-bottom: 5px;
  cursor: pointer;
  &:first-child {
    margin-left: 0px;
  }
}
.oEimg-txt5 {
  width: 373px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  cursor: pointer;
  &:first-child {
    margin-left: 0px;
  }
}
.oEimage4 {
  width: 373px;
  height: 213px;
  .img1 {
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
  }
  .img:hover {
    transform: scale(1.1, 1.1);
  }
  .image2 {
    width: 121px;
    height: 104px;
    position: relative;
    top: -217px;
    left: -2px;
  }
}
.oEimage42 {
  width: 268px;
  height: 153px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
  }
  img:hover {
    transform: scale(1.1, 1.1);
  }
}
.iDtxt3 {
  padding: 0 11px;
  height: 45px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 9px;
  margin-bottom: 16px;
  color: #666666;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.Aspan5 {
  padding-left: 11px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #ffbe37 !important;
  line-height: 14px;
  font-weight: 600;

  a {
    color: #ffbe37 !important;

    font-weight: 600;
  }
}
.oEspan9 {
  padding: 0 17px;
  display: block;
  overflow-wrap: break-word;
  color: #000000;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: justify;
  align-self: center;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s linear;
}
.oEspan9:hover {
  color: @theme;
}
.oEspan10 {
  display: block;
  overflow-wrap: break-word;
  color: #999999 100%;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  padding-left: 17px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aLspan3 {
  background-color: rgba(255, 149, 77, 1);
  margin-right: 15px;
  padding: 5px 5px;
  font-size: 10px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
}
.aLbottom {
  width: 373px;
  height: 40px;
  border: #cccccc;
  border-top: #dedede solid 1px;
  margin-top: 17px;
  display: flex;
  .aLspan1 {
    float: left;
    width: 125px;
    overflow: hidden;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    text-align: left;
    padding-left: 17px;
    flex: 1;
  }
  .aLspan2 {
    float: right;
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    margin-right: 8px;
  }
}
.itenDiv {
  margin-top: 6px;
  height: 50px;
}
</style>
